<template>
  <div class="console">
    <div class="container-content">
      <div
        class="container-menu"
        :style="{ width: collapsed ? '80px' : '245px' }"
      >
        <div class="logo">
          <img src="../assets/images/logo.png" alt />
          <p v-if="!collapsed">行车体感数据分析</p>
        </div>
        <a-menu
          class="menu"
          :default-selected-keys="[$route.path]"
          :inline-collapsed="collapsed"
          :selectedKeys="[$route.path]"
          mode="inline"
          theme="dark"
          :openKeys="openKeys"
          @openChange="onOpenChange"
        >
          <template v-for="v in menuData">
            <a-menu-item
              v-if="!v.children"
              :key="v.name"
              @click="jumpRouter(v)"
            >
              <i
                :class="['iconfont', v.icon, 'mymenu-icon']"
                v-if="!!v.icon && v.icon.length > 0"
              ></i>
              <span>{{ v.text }}</span>
            </a-menu-item>
            <a-sub-menu v-else :key="v.name">
              <span slot="title">
                <i
                  :class="['iconfont', v.icon, 'mymenu-icon']"
                  v-if="!!v.icon && v.icon.length > 0"
                ></i>
                <span>{{ v.text }}</span>
              </span>
              <a-menu-item
                v-for="vv in v.children"
                :key="vv.name"
                @click="jumpRouter(vv)"
              >
                <i
                  :class="['iconfont', vv.icon, 'mymenu-icon']"
                  v-if="!!vv.icon && vv.icon.length > 0"
                ></i>
                <span>{{ vv.text }}</span>
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </div>
      <div class="content-body">
        <div class="console-head">
          <a-icon
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            class="toggle-icon"
            @click="toggleCollapsed"
          />
          <div class="user-info">
            <a-dropdown :trigger="['click', 'hover']" v-model="dropdownVisible">
              <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                {{ cname }}
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay" class="sys-opts">
                <a-menu-item @click="logout" key="2">退出</a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <a-badge :count="pagination1.total" class="msg-num"></a-badge>
          <a-icon type="bell" class="msg-bell" />
        </div>

        <div class="con">
          <div class="main-box">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMenu,getShopMenu } from "api/login";
import meun from "@/router/meun";
import shopMeun from "@/router/shopMeun";
import sectionMeun from "@/router/sectionMeun";
import { mapGetters } from "vuex";
import { paging } from "assets/js/mixin";
import breadcrumb from "components/base/breadcrumb";
export default {
  mixins: [paging],
  components: {
    breadcrumb,
  },
  data() {
    return {
      cname: JSON.parse(localStorage.getItem("userInfo")).account,
      collapsed: false,
      morelist: [], //更多一级导航
      navlist: [], //一级导航
      curNav: ["菜单1"], //一级导航默认选中值：curNav: ['test1']
      openKeys: [""],
      pageNum1: 1,
      pageSize1: 5,
      current1: 1,
      pagination1: {
        //表格分页相关配置
        current: 1,
        total: 0,
        defaultPageSize: 5,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20"]
      },
      menuData: [],
      dropdownVisible: false, //下拉菜单展示隐藏
    };
  },
  mounted() {
    //this.getLeftMenu()
    var auth = JSON.parse(localStorage.getItem("userInfo")).auth
    if(auth===1){
      this.menuData = meun();
    }else if(auth===2){
      this.menuData = sectionMeun();
    } else {
      this.menuData = shopMeun();
    }
    
    this.getActiveMenu(this.menuData)
    if (this.$route.path === "/console/" || this.$route.path === "/console") {
      this.$router.push(
        this.menuData[0].name,
        () => {},
        e => {
          console.log("输出报错", e);
        }
      );
    }
  },
  methods: {
    onOpenChange(openKeys) {  // 当菜单被展开时触发此处
    console.log(openKeys)
      /* 
      经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组
      点击未展开的菜单时传入的是[当前展开菜单的key,点击的菜单key]
      下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0
      */
      if (openKeys.length !== 0) {  
        this.openKeys = [openKeys[1]]
      } else {
        this.openKeys = ['']
      }
    },
    getActiveMenu(result) {
      for (let i = 0; i < this.menuData.length; i++) { 
      //循环【顶级菜单数组列表】 循环的数组下标用i表示
        if (result[i].children !== undefined) {  
        // 如果这个菜单没有【子菜单】 就不继续了（没有子菜单就是【点击可跳转页面但不会展开】的顶级菜单）
          for (let y = 0; y < result[i].children.length; y++) {  
          // 循环【顶级菜单】的子菜单数组（二级菜单）数组下标用y表示
            if (result[i].children[y].name === this.$route.path) { 
            // 如果子菜单的name数据和当前路由地址一样 则断定现在的页面就停留在这个数组对应的菜单中
              this.openKeys = [result[i].name]
              console.log(this.openKeys)
              // 那么就把【顶级菜单（循环数组下标为i）的name属性】赋值给this.openKeys【data中当前展开的菜单】
            }
          }
        }
      }
    },
    getLeftMenu(){
      getMenu().then((res)=>{
        this.menuData = res.data.data.menuData
      })
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    logout() {
      //登出
      localStorage.removeItem("TOKEN");
      localStorage.removeItem("refreshToken");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("permission");
      sessionStorage.removeItem("openKeys");
      sessionStorage.removeItem("defaultSelectedKeys");
      this.$router.push("/login");
    },
    // 相同路由禁止跳转，后续如果需要刷新可以改变?参数
    jumpRouter(user) {
      const { path } = this.$route;
      const { name } = user;
      if (name === path) {
        return;
      }
      this.$router.push(name);
      // if(user.text === '数据大屏'){
      //   var { href } = this.$router.resolve({
      //       path: `/console/configuration/home/index`,
      //     });
      //   window.open(href, "_blank");
      // } else {
      //   this.$router.push(name);
      // }
    }
  },
  computed: {
    openNames() {
      const path =
        this.$route && this.$route.path && this.$route.path.split("/")[2];
      return path || "";
    },
    ...mapGetters(["userInfo"])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~stylus/mixin.styl';
@import '~stylus/base.styl';

.ant-menu-submenu-title {
  font-size: 16px !important;

  .anticon {
    font-size: 16px !important;
  }
}

.over-defined {
  .ant-dropdown-menu-item {
    font-size: 16px;

    i {
      font-size: 16px !important;
    }

    &:hover {
      background-color: transparent;
      color: #1890ff;
    }
  }
}

.sys-opts {
  width: 150px;

  .ant-dropdown-menu-item {
    padding: 5px 16px;

    .ant-collapse-item {
      background: #fff;
      border: none;
      overflow: hidden;
    }

    .ant-collapse-header {
      padding: 5px 35px 5px 16px;
      color: rgba(0, 0, 0, 0.65);

      &:hover {
        background-color: #e6f7ff;
      }
    }

    .ant-collapse-content {
      .ant-collapse-content-box {
        padding: 0;

        .ant-radio-group {
          width: 100%;

          .unit-switch {
            padding-left: 25px;
            height: 32px;

            &:hover {
              background-color: #e6f7ff;
            }

            .unit-name {
              float: left;
              display: inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: calc(100% - 42px);
              line-height: 32px;
            }

            .ant-radio-wrapper {
              float: right;
              line-height: 32px;
              margin: 0 16px 0 10px;
            }
          }

          .current-switch {
            background-color: #e6f7ff;
          }
        }
      }
    }
  }
}

.mymenu-icon {
  font-size: 16px;
  margin-right: 10px;
}

.console {
  .ant-menu-inline-collapsed {
    .ant-menu-item {
      .mymenu-icon + span {
        display: inline-block;
        max-width: 0;
        opacity: 0;
      }
    }

    .ant-menu-submenu-title {
      .mymenu-icon + span {
        display: inline-block;
        max-width: 0;
        opacity: 0;
      }
    }
  }

  .console-head {
    position: relative;
    model(100%, 60px, none, 0 20px 0 0, -1, -1);
    background-color: #fff;
    shadow(0 1px 4px rgba(0, 21, 41, 0.08));
    line-height:60px;
    .toggle-icon {
      font-size: 22px;
      float: left;
      margin: 19px 0 0 20px;

      &:hover {
        color: #1890ff;
      }
    }

    .nav-list {
      display: inline-block;
      model(calc(100% - 250px), 100%, 0 15px, none, -1, 0);

      .nav-icon {
        font-size: 16px;
        margin-right: 10px;
      }

      .ant-menu-horizontal {
        float: left;
        display: inline-block;
        height: 60px;
        line-height: 59px;
        border-bottom: 1px solid #fff;
        background: #fff;
        color: #666;
        font-size: 16px;

        .ant-menu-item {
          margin-top: -2px;

          i {
            font-size: 16px;
          }
        }
      }

      .nav-more {
        display: inline-block;
        width: 20px;
        text-align: center;
        line-height: 60px;
      }

      p {
        color: #fff;
        margin-bottom: 0;
      }
    }

    .msg-bell {
      float: right;
      font-size: 22px;
      margin: 19px 0;
      color: #666;
      cursor: pointer;

      &:hover {
        color: #1890ff;
      }
    }

    .msg-num {
      float: right;
      margin: 10px 15px 0 -2px;
    }

    .user-info {
      float: right;
      font-size: 16px;
      line-height: 60px;

      p {
        cursor: pointer;
      }
    }
  }

  .container-menu {
    model(245px, 100%, none, none, 1, none);
    background: #262935;
    transition: width 0.1s;
    -moz-transition: width 0.1s; /* Firefox 4 */
    -webkit-transition: width 0.1s; /* Safari 和 Chrome */
    -o-transition: width 0.1s; /* Opera */

    .menu {
      // background #262935
      overflow: auto;
      height: 100%;
      padding: 10px 0;
    }

    .logo {
      model(100%, 60px, none, none, -1, -1);
      line-height: 60px;
      text-align: center;
      background-color: #002140;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      img {
        display: inline-block;
        model(40px, auto, -4px auto 0, none, -1, -1);
        vertical-align: middle;
      }

      p {
        display: inline-block;
        font(16px, 60px);
        margin: 0 0 0 15px;
        color: #fff;
        letter-spacing: 6px;
      }
    }
  }

  .container-content {
    pos(0, 0, 0, 0, 0, 0);
  }

  .content-body {
    model(none, 100%, none, none, -1, 0);

    .con {
      background: #f1f2f6;
      model(100%, calc(100% - 60px), none, 20px, -1, 0);
      overflow-y: auto;

      .main-box {
        background: #fff;
        display: inline-block;
        background: #fff;
        display: inline-block;
        width: 100%;
        height: 100%;
        // border: 1px solid #e8e8e8;

        .ant-card-bordered {
          border: none;
        }
      }
    }
  }
}

.msg-dialog {
  .ant-modal-body {
    padding-top: 5px;
  }

  .ant-list-items {
    max-height: 390px;
    overflow-y: auto;

    .ant-list-item {
      padding: 10px 10px 0;
      cursor: pointer;

      &:hover {
        background-color: #e6f7ff;
      }
    }

    .send-time {
      float: right;
      color: #999;
    }

    .msg-content {
      color: #999;
      width: 578px;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .ant-pagination {
    float: right;
    margin-top: 16px;
  }
}

.detail-dialog {
  .ant-modal-body {
    height: 405px;
    overflow-y: auto;
  }
}

.msg-notice {
  .ant-notification-notice-description {
    span {
      cursor: pointer;
    }
  }
}
</style>
